<ng-container>
  <!-- 页头 -->
  <page-header-wrapper [logo]="logo" title="车辆详情">
    <ng-template #logo>
      <button nz-button nz-tooltip nzTooltipTitle="返回上一页" (click)="goBack()">
        <i nz-icon nzType="left" nzTheme="outline"></i>
      </button>
    </ng-template>
    <ng-template #content>
      <sv-container col="1">
        <sv-title style="font-weight: 700">
          <div style="float: right">
            <ng-container *ngIf="!isEdit">
              <button nz-button nzType="default" nzDanger (click)="ratify()" acl acl-ability="VEHICLE-LIST-DETAIL-save">修改</button>
            </ng-container>
            <ng-container *ngIf="isEdit">
              <button nz-button nzType="default" (click)="reset()">取消</button>
              <button nz-button nzType="default" (click)="save()" nzDanger>保存</button>
            </ng-container>
          </div>
        </sv-title>
      </sv-container>

      <div class="font-weight-blod text-md detail-title">
        <a class="sign"></a>
        <span>车辆基础信息</span>
      </div>
      <sv-container col="3">
        <!-- <sv-title style="font-weight: 700">车辆基础信息</sv-title> -->
        <sv label="车牌号" col="1">
          <div style="display: flex">
            <input
              nz-input
              type="text"
              [(ngModel)]="detailData.carNo"
              [readonly]="!isEdit"
              [nzBorderless]="!isEdit"
              [placeholder]="isEdit ? '' : '-'"
            />
            <div style="display: flex">
              <div *ngIf="detailData.networkStatus">
                <span style="height: 5px; width: 5px; border-radius: 50%; background-color: green; display: inline-block"></span>
                已入网</div
              >
              <div *ngIf="!detailData.networkStatus"
                ><span style="height: 5px; width: 5px; border-radius: 50%; background-color: red; display: inline-block"></span>未入网
              </div>
            </div>
          </div>
        </sv>
        <sv label="车牌颜色">
          <!-- <input nz-input type="text" [(ngModel)]="detailData.carNoColor" [readonly]="!isEdit" [nzBorderless]="!isEdit"
            [placeholder]="isEdit?'':'-'"> -->
          <nz-select
            [(ngModel)]="detailData.carNoColor"
            [nzPlaceHolder]="isEdit ? '' : '-'"
            [nzBorderless]="!isEdit"
            [nzShowArrow]="isEdit"
            [nzDisabled]="!isEdit"
          >
            <nz-option *ngFor="let i of contenCarNoColor" [nzLabel]="i.label" [nzValue]="i.value"></nz-option>
          </nz-select>
        </sv>
        <sv label="车辆类型">
          <input
            nz-input
            type="text"
            [(ngModel)]="detailData.carModel ? detailData.carModel : detailData.carModelLabel"
            [readonly]="!isEdit"
            [nzBorderless]="!isEdit"
            [placeholder]="isEdit ? '' : '-'"
          />
          <!-- <nz-select *ngIf="detailData.carModel ? detailData.carModel : detailData.carModelLabel" [(ngModel)]="detailData.carModel ? detailData.carModel : detailData.carModelLabel"
            [nzPlaceHolder]="isEdit ? '' : '-'" [nzBorderless]="!isEdit" [nzShowArrow]="isEdit" [nzDisabled]="!isEdit">
            <nz-option *ngFor="let i of contencarModel" [nzLabel]="i.label" [nzValue]="i.value"></nz-option>
          </nz-select> -->
        </sv>
        <sv label="车长(米)">
          <!-- <input nz-input type="text" [(ngModel)]="detailData.carLength" [readonly]="!isEdit" [nzBorderless]="!isEdit"
            [placeholder]="isEdit?'':'-'"> -->
          <nz-select
            [(ngModel)]="detailData.carLength"
            [nzPlaceHolder]="isEdit ? '' : '-'"
            [nzBorderless]="!isEdit"
            [nzShowArrow]="isEdit"
            [nzDisabled]="!isEdit"
          >
            <nz-option *ngFor="let i of contenCarLength" [nzLabel]="i.label" [nzValue]="i.value"></nz-option>
          </nz-select>
        </sv>
        <sv label="车辆能源类型">
          <nz-select
            [(ngModel)]="detailData.carEnergyType"
            [nzPlaceHolder]="isEdit ? '' : '-'"
            [nzBorderless]="!isEdit"
            [nzShowArrow]="isEdit"
            [nzDisabled]="!isEdit"
          >
            <nz-option *ngFor="let i of contenCarEnergy" [nzLabel]="i.label" [nzValue]="i.value"></nz-option>
          </nz-select>
        </sv>
        <sv label="是否挂靠">
          <nz-select
            [(ngModel)]="detailData.isSelf"
            [nzPlaceHolder]="isEdit ? '' : '-'"
            [nzBorderless]="!isEdit"
            [nzShowArrow]="isEdit"
            [nzDisabled]="!isEdit"
          >
            <nz-option [nzValue]="false" nzLabel="否"></nz-option>
            <nz-option [nzValue]="true" nzLabel="是"></nz-option>
          </nz-select>
        </sv>
        <sv label="是否为挂车">
          <nz-select
            [(ngModel)]="detailData.isTrailer"
            [nzPlaceHolder]="isEdit ? '' : '-'"
            [nzBorderless]="!isEdit"
            [nzShowArrow]="isEdit"
            [nzDisabled]="!isEdit"
          >
            <nz-option [nzValue]="false" nzLabel="否"></nz-option>
            <nz-option [nzValue]="true" nzLabel="是"></nz-option>
          </nz-select>
        </sv>
      </sv-container>
      <sv-container col="1">
        <sv label="车头照">
          <!-- <app-imagelist [imgList]="[detailData?.carFrontPhotoWatermark, detailData?.carFrontPhotoWatermark]"></app-imagelist> -->
          <ng-container
            *ngTemplateOutlet="
              uploadTemplate;
              context: { image: detailData?.carFrontPhotoWatermark, key: 'carFrontPhotoWatermark', hover: 'PhotoWatermark2' }
            "
          >
          </ng-container>
        </sv>
      </sv-container>
    </ng-template>
  </page-header-wrapper>
  <nz-card [class]="isEdit ? 'edit-box' : 'readOnly-box'" [ngClass]="'mb0'">
    <div>
      <div class="mb-xs common-order-header" nz-row>
        <div style="display: flex">
          <button nz-button nzType="primary" style="background-color: green" nzSize="small" *ngIf="detailData.networkStatus"> </button>
          <button *ngIf="!detailData.networkStatus" nz-button nzType="primary" nzSize="small" nzDanger>未入网</button>
          <button *ngIf="detailData.stateLocked" nz-button nzType="primary" nzSize="small" nzDanger>已冻结</button>
          <b class="ml-md" style="font-size: 18px; padding-right: 10px">车牌号: {{ detailData?.carNo }}</b>
        </div>
        <div>
          <ng-container *ngIf="!isEdit">
            <button nz-button nzType="default" nzDanger (click)="ratify()" acl acl-ability="VEHICLE-LIST-DETAIL-save">修改</button>
          </ng-container>
          <ng-container *ngIf="isEdit">
            <button nz-button nzType="default" (click)="reset()">取消</button>
            <button nz-button nzType="default" (click)="save()" nzDanger>保存</button>
          </ng-container>
          <ng-container *ngIf="!detailData.stateLocked">
            <button nz-button nzType="default" nzDanger (click)="freeze()" acl acl-ability="VEHICLE-LIST-freeze">冻结</button>
          </ng-container>
          <ng-container *ngIf="detailData.stateLocked">
            <button nz-button nzType="default" acl acl-ability="VEHICLE-LIST-closeFreeze" (click)="closefreeze()">解冻</button>
          </ng-container>
        </div>
      </div>
    </div>
    <nz-divider class="divider-margin"></nz-divider>
    <div class="mb-lg">
      <div class="font-weight-blod text-md detail-title">
        <a class="sign"></a>
        <span>车辆基础信息</span>
      </div>
      <sv-container col="3" labelWidth="120">
        <!-- <sv-title style="font-weight: 700">车辆基础信息</sv-title> -->
        <sv label="车牌号">
          <input
            nz-input
            type="text"
            [(ngModel)]="detailData.carNo"
            [readonly]="!isEdit"
            [nzBorderless]="!isEdit"
            [placeholder]="isEdit ? '' : '-'"
          />
        </sv>
        <sv label="车牌颜色">
          <!-- <input nz-input type="text" [(ngModel)]="detailData.carNoColor" [readonly]="!isEdit" [nzBorderless]="!isEdit"
            [placeholder]="isEdit?'':'-'"> -->
          <nz-select
            [(ngModel)]="detailData.carNoColor"
            [nzPlaceHolder]="isEdit ? '' : '-'"
            [nzBorderless]="!isEdit"
            [nzShowArrow]="isEdit"
            [nzDisabled]="!isEdit"
          >
            <nz-option *ngFor="let i of contenCarNoColor" [nzLabel]="i.label" [nzValue]="i.value"></nz-option>
          </nz-select>
        </sv>
        <sv label="车辆类型">
          <input
            nz-input
            type="text"
            [(ngModel)]="detailData.carModel ? detailData.carModel : detailData.carModelLabel"
            [readonly]="!isEdit"
            [nzBorderless]="!isEdit"
            [placeholder]="isEdit ? '' : '-'"
          />
          <!-- <nz-select *ngIf="detailData.carModel ? detailData.carModel : detailData.carModelLabel" [(ngModel)]="detailData.carModel ? detailData.carModel : detailData.carModelLabel"
            [nzPlaceHolder]="isEdit ? '' : '-'" [nzBorderless]="!isEdit" [nzShowArrow]="isEdit" [nzDisabled]="!isEdit">
            <nz-option *ngFor="let i of contencarModel" [nzLabel]="i.label" [nzValue]="i.value"></nz-option>
          </nz-select> -->
        </sv>
        <sv label="车长(米)">
          <!-- <input nz-input type="text" [(ngModel)]="detailData.carLength" [readonly]="!isEdit" [nzBorderless]="!isEdit"
            [placeholder]="isEdit?'':'-'"> -->
          <nz-select
            [(ngModel)]="detailData.carLength"
            [nzPlaceHolder]="isEdit ? '' : '-'"
            [nzBorderless]="!isEdit"
            [nzShowArrow]="isEdit"
            [nzDisabled]="!isEdit"
          >
            <nz-option *ngFor="let i of contenCarLength" [nzLabel]="i.label" [nzValue]="i.value"></nz-option>
          </nz-select>
        </sv>
        <sv label="车辆能源类型">
          <nz-select
            [(ngModel)]="detailData.carEnergyType"
            [nzPlaceHolder]="isEdit ? '' : '-'"
            [nzBorderless]="!isEdit"
            [nzShowArrow]="isEdit"
            [nzDisabled]="!isEdit"
          >
            <nz-option *ngFor="let i of contenCarEnergy" [nzLabel]="i.label" [nzValue]="i.value"></nz-option>
          </nz-select>
        </sv>
        <sv label="是否挂靠">
          <nz-select
            [(ngModel)]="detailData.isSelf"
            [nzPlaceHolder]="isEdit ? '' : '-'"
            [nzBorderless]="!isEdit"
            [nzShowArrow]="isEdit"
            [nzDisabled]="!isEdit"
          >
            <nz-option [nzValue]="false" nzLabel="否"></nz-option>
            <nz-option [nzValue]="true" nzLabel="是"></nz-option>
          </nz-select>
        </sv>
        <sv label="是否为挂车">
          <nz-select
            [(ngModel)]="detailData.isTrailer"
            [nzPlaceHolder]="isEdit ? '' : '-'"
            [nzBorderless]="!isEdit"
            [nzShowArrow]="isEdit"
            [nzDisabled]="!isEdit"
          >
            <nz-option [nzValue]="false" nzLabel="否"></nz-option>
            <nz-option [nzValue]="true" nzLabel="是"></nz-option>
          </nz-select>
        </sv>
        <sv label="车头照">
          <!-- <app-imagelist [imgList]="[detailData?.carFrontPhotoWatermark, detailData?.carFrontPhotoWatermark]"></app-imagelist> -->
          <ng-container
            *ngTemplateOutlet="
              uploadTemplate;
              context: { image: detailData?.carFrontPhotoWatermark, key: 'carFrontPhotoWatermark', hover: 'PhotoWatermark2' }
            "
          >
          </ng-container>
        </sv>
      </sv-container>
    </div>
    <div class="mb-lg">
      <div class="font-weight-blod text-md detail-title">
        <a class="sign"></a>
        <span>行驶证信息</span>
      </div>
      <sv-container col="3" labelWidth="120">
        <!-- <sv-title style="font-weight: 700">行驶证信息</sv-title> -->
        <sv label="档案编号">
          <input
            nz-input
            type="text"
            [(ngModel)]="detailData.archivesNo"
            [readonly]="!isEdit"
            [nzBorderless]="!isEdit"
            [placeholder]="isEdit ? '' : '-'"
          />
        </sv>
        <sv label="车辆品牌">
          <ng-container *ngIf="isEdit; else carBrandTemplate">
            <input
              nz-input
              type="text"
              [(ngModel)]="detailData.carBrand"
              [readonly]="!isEdit"
              [nzBorderless]="!isEdit"
              [placeholder]="isEdit ? '' : '-'"
            />
          </ng-container>
          <ng-template #carBrandTemplate>
            {{ detailData?.carBrand }}
          </ng-template>
        </sv>
        <sv label="行驶证注册日期">
          <!-- <input nz-input type="text" [(ngModel)]="detailData.driverLicenseRegisterTime" [readonly]="!isEdit" [nzBorderless]="!isEdit"
        [placeholder]="isEdit?'':'-'"> -->
          <nz-date-picker
            [(ngModel)]="detailData.driverLicenseRegisterTime"
            [nzDisabled]="!isEdit"
            [nzPlaceHolder]="isEdit ? '' : '-'"
            [nzBorderless]="!isEdit"
            [nzSuffixIcon]="isEdit ? 'calendar' : ''"
          >
          </nz-date-picker>
        </sv>
        <sv label="发动机号码">
          <input
            nz-input
            type="text"
            [(ngModel)]="detailData.engineNo"
            [readonly]="!isEdit"
            [nzBorderless]="!isEdit"
            [placeholder]="isEdit ? '' : '-'"
          />
        </sv>
        <sv label="行驶证到期日">
          <nz-date-picker
            [(ngModel)]="detailData.driverLicenseEndTime"
            [nzDisabled]="!isEdit"
            [nzPlaceHolder]="isEdit ? '' : '-'"
            [nzBorderless]="!isEdit"
            [nzSuffixIcon]="isEdit ? 'calendar' : ''"
          >
          </nz-date-picker>
        </sv>
        <sv label="行驶证签发机关">
          <ng-container *ngIf="isEdit; else driverLicenseSigningOrgTemplate">
            <input
              nz-input
              type="text"
              [(ngModel)]="detailData.driverLicenseSigningOrg"
              [readonly]="!isEdit"
              [nzBorderless]="!isEdit"
              [placeholder]="isEdit ? '' : '-'"
            />
          </ng-container>
          <ng-template #driverLicenseSigningOrgTemplate>
            {{ detailData?.driverLicenseSigningOrg }}
          </ng-template>
        </sv>
        <sv label="行驶证发证日期">
          <!-- <input nz-input type="text" [(ngModel)]="detailData.driverLicenseGetTime" [readonly]="!isEdit" [nzBorderless]="!isEdit"
        [placeholder]="isEdit?'':'-'"> -->
          <nz-date-picker
            [(ngModel)]="detailData.driverLicenseGetTime"
            [nzDisabled]="!isEdit"
            [nzPlaceHolder]="isEdit ? '' : '-'"
            [nzBorderless]="!isEdit"
            [nzSuffixIcon]="isEdit ? 'calendar' : ''"
          >
          </nz-date-picker>
        </sv>
        <sv label="车辆识别代码">
          <input
            nz-input
            type="text"
            [(ngModel)]="detailData.carDistinguishCode"
            [readonly]="!isEdit"
            [nzBorderless]="!isEdit"
            [placeholder]="isEdit ? '' : '-'"
          />
        </sv>
        <sv label="使用性质">
          <nz-select
            [(ngModel)]="detailData.useNature"
            [nzPlaceHolder]="isEdit ? '' : '-'"
            [nzBorderless]="!isEdit"
            [nzShowArrow]="isEdit"
            [nzDisabled]="!isEdit"
          >
            <nz-option [nzValue]="'2'" nzLabel="货运"></nz-option>
            <nz-option [nzValue]="'1'" nzLabel="营运"></nz-option>
            <nz-option [nzValue]="'0'" nzLabel="非营运"></nz-option>
          </nz-select>
        </sv>
      </sv-container>

      <sv-container col="3">
        <sv label="核定载质量(kg)">
          <input
            nz-input
            type="number"
            [(ngModel)]="detailData.carLoad"
            [readonly]="!isEdit"
            [nzBorderless]="!isEdit"
            [placeholder]="isEdit ? '' : '-'"
          />
        </sv>
        <sv label="整备质量(kg)">
          <input
            nz-input
            type="number"
            [(ngModel)]="detailData.curbWeight"
            [readonly]="!isEdit"
            [nzBorderless]="!isEdit"
            [placeholder]="isEdit ? '' : '-'"
          />
        </sv>
        <sv label="报废日期">
          <nz-date-picker
            [(ngModel)]="detailData.scrapTime"
            [nzDisabled]="!isEdit"
            [nzPlaceHolder]="isEdit ? '' : '-'"
            [nzBorderless]="!isEdit"
            [nzSuffixIcon]="isEdit ? 'calendar' : ''"
          >
          </nz-date-picker>
        </sv>
        <sv label="总质量(kg)">
          <input
            nz-input
            type="number"
            [(ngModel)]="detailData.carTotalLoad"
            [readonly]="!isEdit"
            [nzBorderless]="!isEdit"
            [placeholder]="isEdit ? '' : '-'"
          />
        </sv>
        <sv label="所有人">
          <ng-container *ngIf="isEdit; else carOwnerTemplate">
            <input
              nz-input
              type="text"
              [(ngModel)]="detailData.carOwner"
              [readonly]="!isEdit"
              [nzBorderless]="!isEdit"
              [placeholder]="isEdit ? '' : '-'"
            />
          </ng-container>
          <ng-template #carOwnerTemplate>
            {{ detailData?.carOwner }}
          </ng-template>
        </sv>
        <sv label="行驶证照片" col="1">
          <ng-container
            *ngTemplateOutlet="
              uploadTemplate;
              context: { image: detailData?.certificatePhotoFrontWatermark, key: 'certificatePhotoFrontWatermark', hover: 'FrontWatermark' }
            "
          >
          </ng-container>
          <ng-container
            *ngTemplateOutlet="
              uploadTemplate;
              context: { image: detailData?.certificatePhotoBackWatermark, key: 'certificatePhotoBackWatermark', hover: 'BackWatermark' }
            "
          >
          </ng-container>
        </sv>
      </sv-container>
    </div>
    <div class="mb-lg">
      <div class="font-weight-blod text-md detail-title">
        <a class="sign"></a>
        <span>道路运输证信息</span>
        <!-- <label *ngIf="!detailData?.roadTransportVerificationStatus" style="color: #ff4d4f"><i nz-icon
            nzType="info-circle" nzTheme="fill" class="mr-xs"></i>验证不通过
        </label>
        <label *ngIf="detailData?.roadTransportVerificationStatus" style="color: #52c41a"><i nz-icon
            nzType="check-circle" nzTheme="fill" class="mr-xs"></i>验证通过
        </label> -->
      </div>
      <sv-container col="3" class="mt16" labelWidth="120">
        <!-- <sv-title style="font-weight: 700">
        <p style="margin-bottom: 0">
          道路运输证信息
          <label *ngIf="!detailData?.roadTransportVerificationStatus" style="color: #ff4d4f"><i nz-icon
              nzType="info-circle" nzTheme="fill" class="mr-xs"></i>验证不通过
          </label>
          <label *ngIf="detailData?.roadTransportVerificationStatus" style="color: #52c41a"><i nz-icon
              nzType="check-circle" nzTheme="fill" class="mr-xs"></i>验证通过
          </label>
        </p>
      </sv-title> -->
        <sv label="道路运输证号">
          <input
            nz-input
            type="text"
            [(ngModel)]="detailData.roadTransportNo"
            [readonly]="!isEdit"
            [nzBorderless]="!isEdit"
            [placeholder]="isEdit ? '' : '-'"
          />
        </sv>
        <sv label="经营许可证号">
          <input
            nz-input
            type="text"
            [(ngModel)]="detailData.roadTransportLicenceNo"
            [readonly]="!isEdit"
            [nzBorderless]="!isEdit"
            [placeholder]="isEdit ? '' : '-'"
          />
        </sv>
        <sv label="发证日期">
          <!-- <input nz-input type="text" [(ngModel)]="detailData.roadTransportStartTime" [readonly]="!isEdit" [nzBorderless]="!isEdit"
        [placeholder]="isEdit?'':'-'"> -->
          <nz-date-picker
            [(ngModel)]="detailData.roadTransportStartTime"
            [nzDisabled]="!isEdit"
            [nzPlaceHolder]="isEdit ? '' : '-'"
            [nzBorderless]="!isEdit"
            [nzSuffixIcon]="isEdit ? 'calendar' : ''"
          >
          </nz-date-picker>
        </sv>
        <sv label="有效期至">
          <!-- <input nz-input type="text" [(ngModel)]="detailData.roadTransportEndTime" [readonly]="!isEdit" [nzBorderless]="!isEdit"
        [placeholder]="isEdit?'':'-'"> -->
          <nz-date-picker
            [(ngModel)]="detailData.roadTransportEndTime"
            [nzDisabled]="!isEdit"
            [nzPlaceHolder]="isEdit ? '' : '-'"
            [nzBorderless]="!isEdit"
            [nzSuffixIcon]="isEdit ? 'calendar' : ''"
          >
          </nz-date-picker>
        </sv>
        <sv label="道路运输证照片">
          <!-- <app-imagelist [imgList]="[detailData?.roadTransportPhoto,detailData?.roadTransportPhotoWatermark ]"></app-imagelist> -->
          <ng-container
            *ngTemplateOutlet="
              uploadTemplate;
              context: { image: detailData?.roadTransportPhotoWatermark, key: 'roadTransportPhotoWatermark', hover: 'Watermark' }
            "
          >
          </ng-container>
        </sv>
      </sv-container>
    </div>
    <div class="mb-lg">
      <div class="font-weight-blod text-md detail-title">
        <a class="sign"></a>
        <span>认证司机</span>
        <button
          style="margin-left: 15px"
          nz-button
          nzSize="small"
          (click)="addCars()"
          acl
          acl-ability="VEHICLE-LIST-DETAIL-addDriverCar"
          nzType="primary"
          >添加</button
        >
      </div>
      <!-- <sv-container col="2" class="mt16">
      <sv-title style="font-weight: 700">认证司机</sv-title>
    </sv-container> -->
      <st
        #st
        [bordered]="true"
        [columns]="columns"
        [scroll]="{ x: '1200px' }"
        [data]="service.$api_get_queryDriverByCarId"
        [req]="{ method: 'POST', allInBody: true, params: reqParams }"
        [res]="{ reName: { list: 'data', total: 'data' } }"
        [ngStyle]="{ margin: '1rem 0' }"
        multiSort
        size="small"
        [page]="{ show: false }"
      >
        <ng-template st-row="auditStatusEnum" let-item let-index="index">
          <div>
            <span *ngIf="item?.auditStatusEnum === -1 || item?.auditStatusEnum === '-1'">未上传</span>
            <span *ngIf="item?.auditStatusEnum === 0 || item?.auditStatusEnum === '0'">草稿</span>
            <span *ngIf="item?.auditStatusEnum === 10 || item?.auditStatusEnum === '10'">待审核</span>
            <span *ngIf="item?.auditStatusEnum === 20 || item?.auditStatusEnum === '20'">已审核</span>
            <span *ngIf="item?.auditStatusEnum === 30 || item?.auditStatusEnum === '30'">已驳回</span>
            <span *ngIf="item?.auditStatusEnum === 40 || item?.auditStatusEnum === '40'">证件过期</span>
          </div>
        </ng-template>
      </st>
    </div>
  </nz-card>
</ng-container>

<nz-modal
  [(nzVisible)]="isVisible"
  [nzWidth]="600"
  [nzFooter]="nzModalFooterEvaluate"
  (nzOnOk)="handleOK()"
  (nzOnCancel)="handleCancel('2')"
>
  <ng-container *nzModalContent>
    <nz-tabset>
      <nz-tab nzTitle="我的评价">
        <div>
          评分: <nz-rate [ngModel]="2.5" nzAllowHalf></nz-rate>
          <div><span>评价内容：</span></div>
        </div>
      </nz-tab>
      <nz-tab nzTitle="司机评价">
        <div> 暂无评价内容 </div>
      </nz-tab>
    </nz-tabset>
  </ng-container>
  <ng-template #nzModalFooterEvaluate>
    <button nz-button nzType="default" (click)="handleCancel('2')">取消</button>
    <button nz-button nzType="primary" (click)="handleOK()">确定</button>
  </ng-template>
</nz-modal>

<ng-template #uploadTemplate let-image="image" let-key="key" let-hover="hover">
  <nz-upload
    class="avatar-uploader"
    [nzAction]="uploadURl"
    nzName="multipartFile"
    nzListType="picture-card"
    [nzShowUploadList]="false"
    nzFileType="image/png,image/jpeg,image/jpg,image/gif"
    [nzDisabled]="!isEdit || disabledUpload"
    (nzChange)="changeUpload($event, key)"
  >
    <ng-container *ngIf="!image && isEdit">
      <i class="upload-icon" nz-icon [nzType]="false ? 'loading' : 'plus'"></i>
      <div class="ant-upload-text">上传</div>
    </ng-container>
    <div
      *ngIf="image"
      (mouseover)="detailData[hover] = true"
      (mouseleave)="detailData[hover] = false"
      (click)="$event.cancelBubble = true"
      class="image-hover"
    >
      <img (click)="showImg(image)" [src]="image" style="width: 200px; height: 160px" />
      <div class="mask" *ngIf="detailData[hover] && isEdit"></div>
      <div class="mask-over" *ngIf="detailData[hover] && isEdit">
        <i nz-icon nzType="close-circle" nzTheme="fill" class="delete-icon" (click)="deleteImg(key)"></i>
        <div style="display: flex; align-items: center">
          <i nz-icon nzType="eye" nzTheme="fill" class="show-icon" (click)="showImg(image)"></i>
        </div>
      </div>
    </div>
  </nz-upload>
</ng-template>
